<template>
    <div class="indexWrap">
        <el-form ref="elFormRef" :model="searchParams" :rules="rules" label-width="auto">
            <el-row :gutter="20">
                <el-col :span="8">
                    <!--输入框-->
                    <el-form-item label="客户ID：" prop="customerId">
                        <el-input v-model.number="searchParams.customerId"
                            placeholder="请输入客户ID" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--输入框-->
                    <el-form-item label="客户名称：" prop="customName">
                        <el-input @input="onlyNumber('customName')" v-model="searchParams.customName"
                            placeholder="请输入客户名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--选择框-->
                    <el-form-item label="广告位置：" prop="advertisingLocation">
                        <el-select v-model="searchParams.advertisingLocation" clearable placeholder="">
                            <el-option v-for="(item, index) in advertisingLocationOptions" :value="item.value"
                                :label="item.label" :key="index" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="margin-bottom: 15px;">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button class="resetBtn" @click="resetSearch">重置</el-button>
        </div>
        <el-table v-loading="loading" stripe border show-overflow-tooltip :data="tableData" style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" header-cell-class-name="dark-table-header"
            @selection-change="handleSelectionChange" ref="tableRef">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="customerId" label="客户编号" align="center" />
            <el-table-column prop="userName" label="客户名称" align="center" />
            <el-table-column prop="phone" label="手机号" align="center" />
            <el-table-column prop="authority" label="权限" align="center" />
            <el-table-column prop="adress" label="收货地址" align="center" />
            <el-table-column prop="time" label="注册时间" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10" :total="total" background
            layout="->, total, sizes, prev, pager, next, jumper" style="margin-top: 15px;"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script type="text/javascript">

export default {
    data() {
        return {
            loading: false,
            tableData: [{
                customerId: "123456",
                userName: "张三",
                phone: "18709876543",
                authority: "管理员",
                adress: "北京市朝阳区",
                time: "2020-09-01 12:00:00"
            }],
            currentPage: "",
            total: 0,
            page: {
                pageNum: 1,
                pageSize: 10,
            },
            searchParams: {
                customerId: "",
                customName: "",
                phone: "",
                advertisingLocation: ""
            },
            rules: {
                customerId: [
                    { required: true, message: "请输入客户ID", trigger: 'blur' },
                    { type: 'number', message: '邮箱格式错误', trigger: 'blur' },
                ],
                customName: [{ required: true, message: "请输入客户名称", trigger: 'blur' }],
                phone: [{ required: false, message: "请输入手机号", trigger: 'blur' }],
            },
            multipleSelection: [],//多选框选中项
            advertisingLocationOptions: [], //广告位置：选择器选项
        }
    },
    watch: {

    },
    created() {
        // 请求表格数据
        this.initData();
    },
    components: {

    },
    methods: {
        initData() {
            // 请求表格数据
        },
        search() {
            //搜索
            this.$refs.elFormRef.validate((valid) => {
                if (valid) {
                    //搜索
                    this.page.pageNum = 1;
                    this.initData();
                } else {
                    //校验未通过
                }
            });
        },
        resetSearch() {
            //重置
            Object.keys(this.searchParams).forEach((key) => {
                this.searchParams[key] = '';
            })
        },
        handleSelectionChange(val) {
            //多选框选中项
            this.multipleSelection = val;
        },
        handleSizeChange(size) {
            //分页-页数
            this.page.pageSize = size;
            this.page.pageNum = 1;
            this.initData();
        },
        handleCurrentChange(currentPage) {
            //分页-当前页
            this.page.pageNum = currentPage;
            this.initData();
        },
        operaBtnMet(row) {
            //操作按钮调用的方法
            console.log(row);
        },
        checkAge(rule, value, callback) {
            if (!Number.isInteger(Number(value))) {
                callback(new Error('请输入正整数'))
            } else {
                if (value < 18) {
                    callback(new Error('必须大于18'))
                } else {
                    callback()
                }
            }
        },
        onlyNumber(params) {
            this.searchParams[params] = this.searchParams[params].replace(/[^1-9]/g, '');
        }
    }
}
</script>
<style type="text/css" lang="less" scoped>
.indexWrap {}
</style>